<template>
  <div class="Alarm">
    <div class="page-head">
      <div class="page-title">告警记录</div>
      <div class="page-tool">
        <search-input placeholder="设备名称或CNC ID搜索" @search="searchChange" />
      </div>
    </div>
    <div class="page-body">
      <div class="table_data">
        <el-scrollbar class="scroll-bar">
          <el-table :data="tableData" stripe border :fit="true">
            
            <el-table-column
              prop="alias"
              label="设备名称"
              width="220"
            >
            </el-table-column>
            <el-table-column
              prop="cnc"
              label="CNC ID"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="floor"
              label="楼层"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="branch"
              label="车间"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="line"
              label="条线"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="seg"
              label="序号"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="group_name"
              label="所属分组"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="serial"
              label="设备识别号"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="attime"
              label="告警时间"
              width="180"
            >
            </el-table-column>
            <el-table-column
              prop="except_reason"
              label="原因"
              width="180"
            >
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
      <div class="page-footer">
        <pagina-tion
          class="page-pager"
          v-show="total >= 0"
          :background="true"
          :total="total"
          :offset.sync="offset"
          :limit.sync="limit"
          @pagination="getChangePage"
        />
      </div>
    </div>

  </div>
</template>

<script>
import * as api from "@/api";
import { limit, smallLimit } from "@/consts/consts";


export default {
  data() {
    return {
      limit: document.body.clientHeight >= 770 ? limit : smallLimit,
      total: 0,
      offset: 0,
      tableData: [],
    }
  },


  methods: {
    
    searchChange(e) {
      this.search = e;
      this.offset = 0;
      this.getList();
    },

    getChangePage(val) {
      this.offset = val.offset;
      this.getList();
    },

    // 列表
    async getList() {
      const { code, data, total } = await api.alarm(this).getList({
        offset: this.offset,
        limit: this.limit,
      });
      if (code === 0) {
        this.tableData = data
        this.total = total
      }
    },


  },
  created() {
    this.getList();
  },
};
</script>

<style lang="stylus">
.Alarm {

}

</style>